<template>
  <section id="goods-class">
    <c-title :hide="false" text='商品分类' :popClose="true" @onGoBack="goback">
    </c-title>

    <section class="list" v-for="(item, index1) in classify_data" :key='index1'>
      <ul class="box-a" @click="oneLevel(1, index1)">
        <li class="left">
          <span>{{ item.name }}</span>
          <i :class="!item.level_active ? 'iconfont icon-member_right' : 'iconfont icon-icon_down1'"></i>
        </li>
        <div class="list-child-category" :class="!item.level_active?'collapsed':'expanded'">
          <div v-for="(val, index2) in item.childrens" :key='index2' class="box-b">
            <div class="box-b-content">
              <span class="child-name">{{ val.name }}</span>
              <div class="box-b-content-right">
                <span @click.stop="classifyRoute(2, 2, index1, index2)">编辑</span>
                <span @click.stop="deleteClassify(2, index1, index2)">删除</span>
              </div>
            </div>
          </div>
        </div>
        <li class="line"></li>
        <li class="box-a-bottom">
          <div class="align-center" @click.stop="classifyRoute(1, 2, index1)">
            <i class="iconfont icon-add2"></i>
            <span>添加</span>
          </div>
          <div class="align-center" @click.stop="classifyRoute(2, 1, index1)">
            <i class="iconfont icon-icon_edit"></i>
            <span>编辑</span>
          </div>
          <div class="align-center" @click.stop="deleteClassify(1, index1)">
            <i class="iconfont icon-appointment_delete"></i>
            <span>删除</span>
          </div>
        </li>
      </ul>
    </section>

    <section id="bottom" :style="{ width: (this.fun.getPhoneEnv() == 3 ? '375px' : '100%') }">
      <button type="button" @click="addClassify">添加分类</button>
    </section>

    <!-- <el-button type="success" @click="classifyRoute(1)">添加分类</el-button>
        <el-button type="info" @click="classifyRoute(2)">一级分类</el-button>
        <el-button type="warning" @click="classifyRoute(3)">二级分类</el-button> -->
  </section>
</template>

<script>
import goodsClassify from "./goods_classify_controller.js";

export default goodsClassify;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#goods-class {
  position: relative;
  padding-bottom: 3.75rem;

 .collapsed {
  max-height: 0;
  overflow: hidden;
  transition:max-height 0.5s ease;
}
 .mt-24{
  margin-top: 24rpx;
}
 .expanded {
 max-height: 500px; /* 展开后最大高度为400像素，显示所有内容 */
 transition:max-height 1s ease;
}


  .list {
    .align-center {
      display: flex;
      align-items: center;
    }

    .box-a {
      margin: 0.75rem;
      background-color: #fff;
      border-radius: 0.5rem;
      padding: 1.1875rem 0.75rem 0.75rem;

      .icon-member_right,.icon-icon_down1 {
        color: #999;
        font-size: 16px;
      }

      .box-a-bottom {
        margin-top: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 0.75rem;
        color: #999;
        font-weight: 400;

        .iconfont {
          margin-right: 0.125rem;
        }

      }

      .left {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.875rem;
        color: #00001C;
        font-weight: 400;
        margin-bottom: 1.1875rem;
      }

      .line {
        width: 100%;
        height: 1px;
        background-color: #E7E7E7;
      }

      .right {
        display: flex;

        i {
          font-size: 1.5rem;
          color: #c9c9c9;
          width: 2.5rem;
          line-height: 2.5rem;
          position: relative;
          z-index: 3;
        }
      }

      .more {
        z-index: 2;
        background: rgba(51, 51, 51, 0.9);
        border-radius: 0.25rem;
        color: #f0f0f0;
        width: 7.5rem;
        position: absolute;
        right: 3rem;
        top: 2.625rem;

        ul {
          display: flex;
          justify-content: center;

          li {
            flex: 1;
            text-align: center;

            i {
              display: block;
              margin-top: 0.125rem;
            }
          }
        }

        .icon {
          position: absolute;
          right: 0.625rem;
          top: -0.95rem;

          i {
            color: rgba(51, 51, 51, 0.9);
          }
        }
      }
    }

    .box-b:last-child {
      border-bottom: unset;
    }


    .list-child-category {
      border-radius: 0.25rem;
      overflow: hidden;
      margin-bottom: 0.75rem;
      margin-top: 1.1875rem;
    }

    .box-b {
      background-color: #F5F5F5;
      padding: 0.9375rem 0.75rem;
      border-bottom: solid 1px #ebebeb;
      display: flex;
      justify-content: space-between;
      position: relative;
      height: 2.75rem;
      line-height: 2.75rem;

      .child-name {
        color: #454545;
        font-size: 0.875rem;
        font-weight: 400;
      }

      .box-b-content-right {
        display: flex;
        align-items: center;
        font-weight: 400;
        color: #999999;
        font-size: 0.75rem;
      }

      .box-b-content-right span:first-child {
        margin-right: 1.4063rem;
      }

      .box-b-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .box-c {
      padding-left: 0.875rem;
      background: #fafafa;
      border-top: solid 0.0625rem #ebebeb;
      display: flex;
      justify-content: space-between;
      position: relative;

      .left {
        display: flex;
        margin-left: 2.5rem;
        padding: 0.625rem 0;
        font-size: 16px;

        .img {
          width: 2.5rem;
          height: 2.5rem;
          overflow: hidden;
          background-color: #ccc;
          margin: 0 0.625rem;

          img {
            width: 100%;
            overflow: hidden;
          }
        }

        span {
          line-height: 2.5rem;
        }
      }

      .right {
        display: flex;
        padding: 0.625rem 0;
        margin-right: 0.625rem;

        i {
          font-size: 1.5rem;
          color: #c9c9c9;
          width: 2.5rem;
          line-height: 2.5rem;
          position: relative;
          z-index: 3;
        }
      }

      // 编辑
      .more {
        z-index: 2;
        background: rgba(51, 51, 51, 0.9);
        border-radius: 0.25rem;
        color: #f0f0f0;
        width: 5.5rem;
        position: absolute;
        right: 3rem;
        top: 2.625rem;

        ul {
          display: flex;
          justify-content: center;

          li {
            flex: 1;
            text-align: center;

            i {
              display: block;
              margin-top: 0.125rem;
            }
          }
        }

        .icon {
          position: absolute;
          right: 0.625rem;
          top: -0.95rem;

          i {
            color: rgba(51, 51, 51, 0.9);
          }
        }
      }
    }
  }

  #bottom {
    border-top: solid 0.0625rem #ebebeb;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    padding: 0 0.875rem;
    font-size: 16px;

    button {
      color: #fff;
      width: 100%;
      height: 2.5rem;
      line-height: 2.5rem;
      background-color: #f15353;
      border: none;
      margin: 0.375rem 0;
      border-radius: 1.2813rem;
      font-size: 0.9375rem;
      font-weight: 400;
    }
  }
}
</style>


